import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormRadio,
  ProFormUploadButton
} from '@ant-design/pro-components';
import {Form, message, Upload} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import React from 'react';
import {listCourseSubjectAPI} from "@/pages/course-subject/services";
import {LessonOption} from "@/constants/LessonConstants";
import {listLicenseTypeAPI} from "@/pages/license-type/services";
import {DrawerForm} from "@ant-design/pro-form";
import {listQuestionTypeAPI} from "@/pages/question/question-type/services";

interface QuestionFormProps {
  trigger: React.ReactNode;
  onFinish: (values: API.IQuestion) => Promise<boolean>;
  initialValues?: API.IQuestion;
  formType: 'create' | 'edit';
}

const QuestionForm: React.FC<QuestionFormProps> = ({
                                                     trigger,
                                                     onFinish,
                                                     initialValues,
                                                     formType,
                                                   }) => {
  const [form] = Form.useForm();

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  return (
    <DrawerForm<API.IQuestion>
      title={formType === 'create' ? '新增题目' : '编辑题目'}
      width={800}
      trigger={trigger as any}
      form={form}
      autoFocusFirstInput
      onFinish={async (values: API.IQuestion & { contentImages?: any[] }) => {
        const contentImageIds = values?.contentImages?.map((item: any) => item.response.data?.id)
        if (contentImageIds && contentImageIds.length > 0) {
          values.contentImage = contentImageIds[0]
        }
        const success = await onFinish(values);
        if (success) {
          form.resetFields();
        }
        return success;
      }}
      grid
      colProps={{span: 24}}
      initialValues={initialValues ? {
        ...initialValues,
        contentImage: initialValues.contentImage ? [{
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: initialValues.contentImage
        }] : []
      } : {
        status: "0",
        difficulty: "1",
        isNewRule: "0",
        isHot: "0",
        viewCount: 0
      }}
      onOpenChange={(open) => {
        if (!open) {
          form.resetFields();
        }
      }}
    >
      <ProFormSelect
        name="typeId"
        label="题目类型"
        colProps={{span: 12}}
        request={async () => {
          const {data} = await listQuestionTypeAPI({status: "0"});
          return (data || []).map((item: API.IQuestionType) => {
            return {
              label: item.name,
              value: item.id,
            }
          })
        }}
        rules={[{required: true, message: '请选择题目类型'}]}
      />
      <ProFormSelect
        name="licenseTypeId"
        label="驾照类型"
        request={async () => {
          const {data} = await listLicenseTypeAPI({});
          return (data || []).map((item: API.ILicenseType) => {
            return {
              label: `${item.licenseCode}-${item.licenseName}`,
              value: item.id,
            }
          })
        }}
        options={LessonOption}
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择报名类型'}]}
      />

      <ProFormSelect
        name="courseTypeId"
        label="科目"
        request={async () => {
          const {data} = await listCourseSubjectAPI({});
          return (data || []).map((item: API.ICourseSubject) => {
            return {
              label: item.subjectName,
              value: item.id,
            }
          })
        }}
        options={LessonOption}
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择科目'}]}
      />

      <ProFormRadio.Group
        name="questionType"
        label="题目类型"
        colProps={{span: 12}}
        options={[
          {label: '单选题', value: '1'},
          {label: '多选题', value: '2'},
          {label: '判断题', value: '3'},
        ]}
        rules={[{required: true, message: '请选择题目类型'}]}
      />

      <ProFormTextArea
        name="content"
        label="题目内容"
        placeholder="请输入题目内容"
        rules={[{required: true, message: '请输入题目内容'}]}
        fieldProps={{rows: 3}}
      />
      <ProFormTextArea
        name="keyPoint"
        label="考点"
        placeholder="请输入题目考点"
        fieldProps={{rows: 1}}
      />

      <ProFormTextArea
        name="explanation"
        label="题目解析"
        placeholder="请输入题目解析"
        fieldProps={{rows: 4}}
      />

      <ProFormUploadButton
        name="contentImages"
        label="题目图片"
        max={1}
        action={'/api/file/upload'}
        getValueFromEvent={normFile}
      >
        <div>
          <PlusOutlined/>
          <div style={{marginTop: 8}}>上传图片</div>
        </div>
      </ProFormUploadButton>

      <ProFormRadio.Group
        name="isNewRule"
        label="是否新规题"
        colProps={{span: 12}}
        options={[
          {label: '是', value: '0'},
          {label: '否', value: '1'},
        ]}
      />

      <ProFormRadio.Group
        name="isHot"
        label="是否热门题"
        colProps={{span: 12}}
        options={[
          {label: '是', value: '0'},
          {label: '否', value: '1'},
        ]}
      />

      <ProFormRadio.Group
        name="difficulty"
        label="题目难度"
        colProps={{span: 12}}
        options={[
          {label: '简单', value: '1'},
          {label: '中等', value: '2'},
          {label: '困难', value: '3'},
        ]}
      />

      <ProFormRadio.Group
        name="status"
        label="状态"
        colProps={{span: 12}}
        options={[
          {label: '启用', value: '0'},
          {label: '禁用', value: '1'},
        ]}
      />
    </DrawerForm>
  );
};

export default QuestionForm;
